<template>
  <div class="home">
    <el-form :inline="true" :model="content" class="demo-form-inline">
         货物类型名称:
      <el-form-item >
       <el-input v-model="content.warehouseName" placeholder="货物类型名称:"></el-input>
      </el-form-item>
      请选择车队名称:
      <el-form-item >
         <el-select v-model="content.vehicleName" clearable placeholder="请选择车队名称">
            <el-option v-for="item in tableData1" :key="item.vehicleId" :label="item.vehicleName" :value="item.vehicleName"></el-option>
          </el-select>
       </el-form-item>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >搜索</el-button>
          <el-button round type="primary" icon="el-icon-search" @click="onSubmit1"
          >重置</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >+新增车队</el-button>
    </el-container>
    <el-table 
    :data="tableData">
      <el-table-column label="货品编号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.warehouseNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="货品名称" width="150" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.warehouseName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输类型" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -3px">{{ scope.row.transshipmentTmsVehicleType.vehicleName }}</span>
        </template>
      </el-table-column>
       <el-table-column label="货品重量" width="150">
        <template slot-scope="scope">
          <span style="margin-left: -2px">{{ scope.row.warehouseWeight }}</span>
        </template>
      </el-table-column>
       <el-table-column label="货品体积" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 8px">{{ scope.row.warehouseVolume }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 20px">{{ scope.row.warehouseRemarks }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            style="margin-left: 12px"
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index,scope.row)"
            >编辑</el-button>


          <el-button
            style="margin-left: 12px"
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index,scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" >
         <el-form-item label="货物类型名称" prop="warehouseName" :label-width="formLabelWidth">
          <el-input v-model="form.warehouseName" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="运输车型" prop="warehouseVehicleType" :label-width="formLabelWidth">
         <el-select v-model="form.warehouseVehicleType" clearable placeholder="请选择车队名称">
            <el-option v-for="item in tableData1" :key="item.vehicleId" :label="item.vehicleName" :value="item.vehicleNumber">{{item.vehicleName}}</el-option>
          </el-select>
       </el-form-item>
        <el-form-item label="默认重量 (千克)" prop="warehouseWeight" :label-width="formLabelWidth">
          <el-input v-model="form.warehouseWeight" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        
       <el-form-item label="默认体积 (方)" prop="warehouseVolume" :label-width="formLabelWidth">
          <el-input v-model="form.warehouseVolume" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
           <el-form-item label="描述" prop="warehouseRemarks" :label-width="formLabelWidth">
          <el-input v-model="form.warehouseRemarks" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updStu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data(){
    return{
      tableData:[],
      tableData1:[],
 
      total: 0,
      tclini:[],
      dialogFormVisible: false, //是否显示dialog，默认不显示
      formLabelWidth: "200px",
      bj:"",
      content: {
        page: 1,
        num: 4,
        warehouseName: "",//货品名称
        vehicleName:"",//车型名称
      },
      form: {
        warehouseId:"",//货物序号
        warehouseNumber:"",//货品编号
        warehouseName:"",//货品名称
        warehouseType: "",//货品单位
        warehouseItem:"",//货品货值
        warehouseBarcodesGoods: "",//货品条码
        warehouseQuantityGoods: "",//货品数量
        warehouseVolume:"",//货品体积
        warehouseWeight:"",//货品重量
        warehouseGoods: "",//货品备注
        warehouseVolumeGoods:"",//货品总体积
        warehouseTotalItem:"",//货品总重量
        warehouseRemarks:"",//备注
        warehouseComeTo:"",//总计
        warehouseStatus:"",//状态
        vehicleName:"",
        warehouseVehicleType:"",
      },
    }
  },
  methods:{
    sjlb(row){
      console.log(row.motorcadeDriverDetails)
    },
    clxq(row){
      console.log(row.motorcadeVehicleDetails)
    },
    load(){
      console.log(this.content)
      axios.post("/api/network-tms-warehouse/PageInfoDwxxAllList",this.content).then(data=>{
        console.log(data.data.rows)
        this.tableData = data.data.rows; //获取分页数据
        this.total = data.data.total; //获取总记录数
      })
       //获取车型信息
      axios.get("/api/transshipment-tms-vehicle-type/xlkNetworkTmsWarehouse").then(data=>{
        this.tableData1=data.data;
      })

    },
    handleEdit(index,row){
      this.form=row;
      console.log(this.form)
      this.form.warehouseVehicleType=row.transshipmentTmsVehicleType.vehicleNumber;
      this.dialogFormVisible=true;
      this.bj=false;
    },
    handleDelete(index,row){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get("/api/network-tms-warehouse/deleteWarehouse?id="+row.warehouseId).then(data=>{
            console.log(data.data)
            if(data.data){
                this.load();
            }else{
              this.$message({
              type: 'success',
              message: '删除失败!'
              })
            }
      })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     onSubmit(){
       this.load();
     },
    onSubmit1(){
      this.content.motorcade_number="",
      this.content.motorcade_name="",
      this.content.motorcade_head="",
      this.load();
    },
    add(){
      this.dialogFormVisible=true;
      this.bj=true;
      this.form={};
    },
    updStu(){

      if(this.bj){
        //this.form.circuitTypesDate=tim;
        axios.post("/api/network-tms-warehouse/addWarehouse",this.form).then(data=>{
          if(data.data){
             this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }else{
        //this.form.circuitTypesDate=tim;
        axios.post("/api/network-tms-warehouse/updateWarehouse",this.form).then(data=>{
          if(data.data){
             this.$message({
             message: '恭喜你，修改成功',
             type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }
    },
    handleSizeChange(val){
       this.content.num = val;
       this.load();
    },
    handleCurrentChange(val){
       this.content.page = val;
       this.load();
    },
  },
  created(){
    this.load();
   },
})
</script>
